@extends('admin/layout/master')
@section('title', '文章修改')
@section('title2', '文章修改')

@section('action')
    <a class="layui-btn layui-btn-small layui-btn-normal usersAdd_btn" href="{{ url('admin/article/index/'.$olddata->type_id) }}"><i class="layui-icon"></i>文章列表</a>
    <!-- <a class="layui-btn layui-btn-small layui-btn-danger batchDel"><i class="layui-icon"></i>导出数据</a> -->
@endsection

@section('content')
    <div class="error">
        @if (count($errors) > 0)
            <div class="alert alert-danger">
                错误列表：
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
    </div>

    <form class="layui-form" name="mainform" action="{{ url('/admin/article/update',array('id'=>$olddata->id)) }}" method="post">
        <div class="layui-form-item">
            <label class="layui-form-label">所属栏目</label>
            <div class="layui-input-block">
                <select name="type_id" lay-verify="required">
                    <option value=""></option>
                    @foreach ($typeData as $v)
                        <option value="{{$v['id']}}" <?php echo $v['id'] == $olddata->type_id ? 'selected' : ''; ?> >{{$v['name']}}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-block">
                <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" value="{{ $olddata->title }}" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">缩略图</label>
            <div class="layui-input-block">

                <button type="button" class="layui-btn" id="test1">
                    <i class="layui-icon"></i>上传图片
                </button><input class="layui-upload-file" type="file" accept="undefined">
                <div style="float: left;width: 50px;height: 50px;margin-right: 20px;border: 1px solid #999;">
                    <img style="width: 50px;height: 50px;cursor: pointer;" id="file_img" src="{{ $olddata->picname ? $olddata->picname : '/admin/images/noimg.gif' }}" onclick="javascript:window.open(this.src);" alt="">
                </div>
                <input type="text" name="picname" placeholder="缩略图地址" value="{{ $olddata->picname }}" autocomplete="off" class="layui-input" style="display: inline;width: 50%;margin-left: 20px;">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">标记</label>
            <div class="layui-input-block">
                <input type="checkbox" name="flag[]" value="推荐" title="推荐" <?php echo strpos(',' . $olddata->flag . ',', ',推荐,') !== false ? 'checked' : ''; ?> >
                <input type="checkbox" name="flag[]" value="置顶" title="置顶" <?php echo strpos(',' . $olddata->flag . ',', ',置顶,') !== false ? 'checked' : ''; ?> >
                <input type="checkbox" name="flag[]" value="幻灯" title="幻灯" <?php echo strpos(',' . $olddata->flag . ',', ',幻灯,') !== false ? 'checked' : ''; ?> >
                <input type="checkbox" name="flag[]" value="特荐" title="特荐" <?php echo strpos(',' . $olddata->flag . ',', ',特荐,') !== false ? 'checked' : ''; ?> >
                <input type="checkbox" name="flag[]" value="滚动" title="滚动" <?php echo strpos(',' . $olddata->flag . ',', ',滚动,') !== false ? 'checked' : ''; ?> >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">标签</label>
            <div class="layui-input-block">
                <input type="text" name="tags" placeholder="" value="{{ $tags_name }}" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div style="margin: 0px auto;position: fixed;left:40%;z-index: 1000;display: none;justify-content:center;" id="tags_mian">
            <div style="border: 1px solid red;width: 500px;padding: 10px;background: #fff;" class="clear selected">
                @foreach($tagData as $v)
                    <div style="border: 1px solid green;float: left;margin: 5px;padding:10px;cursor: pointer;" value="{{$v->id}}">{{$v->name}}</div>
                @endforeach
            </div>
            <div style="border: 1px solid red;height: 20px;width: 20px;line-height: 20px;text-align: center;border-radius: 15px;cursor: pointer;" class="close">x</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">专题</label>
            <div class="layui-input-block">
                <input type="text" placeholder="" id="case_id" value="<?php if(isset($v->cases->name)){echo $v->cases->name;} ?>" autocomplete="off" class="layui-input">
                <input type="hidden" name="case_id" value="{{ $olddata->case_id }}">
            </div>
        </div>
        <div style="margin: 0px auto;position: fixed;left:30%;z-index: 1000;display: none;justify-content:center;top:30%;" id="cases_mian">
            <div style="border: 1px solid red;width: 500px;padding: 10px;background: #fff;" class="clear selected2">
                @foreach($caseData as $v)
                    <div style="border: 1px solid green;float: left;margin: 5px;padding:10px;cursor: pointer;" value="{{$v->id}}">{{$v->name}}</div>
                @endforeach
            </div>
            <div style="border: 1px solid red;height: 20px;width: 20px;line-height: 20px;text-align: center;border-radius: 15px;cursor: pointer;" class="close">x</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">关键字</label>
            <div class="layui-input-block">
                <input type="text" name="keywords" placeholder="请输入关键字" value="{{ $olddata->keywords }}" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">描述</label>
            <div class="layui-input-block">
                <textarea name="description" placeholder="请输入内容" class="layui-textarea">{{ $olddata->description }}</textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">正文类型</label>
            <div class="layui-input-block">
                <input type="radio" name="type" lay-filter="type" value="1" title="makerdown" <?php if(isset($_GET['type']) && $_GET['type'] == 1){echo "checked";} ?>>
                <input type="radio" name="type" lay-filter="type" value="2" title="html" <?php if(isset($_GET['type']) && $_GET['type'] == 2){echo "checked";} ?>>
            </div>
        </div>
        @if((isset($_GET['type']) && $_GET['type'] == 2))
            <div class="layui-form-item" id="ueBox">
                <label class="layui-form-label">内容</label>
                <div class="layui-input-block">
                    <script id="body" name="body" type="text/plain">{!!  $olddata->body !!}</script>
                </div>
            </div>
        @elseif(isset($_GET['type']) && $_GET['type'] == 1)
            <div id="makerdownBox">
                <label class="layui-form-label">内容</label>
                <div class="" id="makerdown">
                    <textarea style="display:none;" name="body">{{ $olddata->body }}</textarea>
                </div>
            </div>
        @elseif($olddata->type == 2)
            <div class="layui-form-item" id="ueBox">
                <label class="layui-form-label">内容</label>
                <div class="layui-input-block">
                    <script id="body" name="body" type="text/plain">{!!  $olddata->body !!}</script>
                </div>
            </div>
        @else
            <div id="makerdownBox">
                <label class="layui-form-label">内容</label>
                <div class="" id="makerdown">
                    <textarea style="display:none;" name="body">{{ $olddata->body }}</textarea>
                </div>
            </div>
        @endif
        <div class="layui-form-item">
            <div class="layui-input-block">
                {{ csrf_field() }}
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
@endsection

@section('layuijs')
    <script>
        //一般直接写在一个js文件中
        layui.use(['layer', 'form', 'upload'], function(){
            var layer = layui.layer
                    ,form = layui.form;
            var upload = layui.upload;

            // 设置编辑器
            form.on('radio(type)', function(data){
                var type = data.value;
                console.log(type);
                window.location.href = "?type=" + type;
            });

            //执行实例
            var tag_token = $("[name='_token']").val();
            var uploadInst = upload.render({
                elem: '#test1' //绑定元素
                ,field: 'file_img'
                ,data: {'_token':tag_token}
                ,url: "{{url('/admin/tool/upload/file_img/article')}}" //上传接口
                ,done: function(res){
                    //上传完毕回调
                    if(res.success == 1){
                        console.log(res);
                        layer.msg('上传成功');
                        $("#file_img").attr("src",res.url);
                        $("input[name='picname']").val(res.url);
                    } else {
                        layer.msg('上传失败');
                    }
                }
                ,error: function(){
                    //请求异常回调
                    layer.msg('上传失败');
                }
            });
        });

        // 设置value值
        $('.selected div').click(function(){
            var value = $(this).html();
            var value2 = $(this).attr('value');
            var tags = $("[name='tags']").val();
            if(tags.indexOf(value) == '-1'){
                if(tags){
                    $("[name='tags']").val(tags + "," + value);
                } else {
                    $("[name='tags']").val(value);
                }
            } else {
                if(tags){
                    tags = ','+tags+',';
                    tags = tags.replace(value+',', '');
                    tags = tags.substr(1);
                    tags = tags.substr(0,tags.length-1);
                    $("[name='tags']").val(tags);
                }
            }
        });
        $('.selected2 div').click(function(){
            var html = $(this).html();
            var value = $(this).attr("value");
            $("#case_id").val(html);
            $("[name='case_id']").val(value);
        });
        // 关闭tags添加层
        $('.close').click(function(){
            $("#tags_mian").css('display','none');
            $("#cases_mian").css('display','none');
        });
        // 打开tages层
        $("[name='tags']").click(function(){
            console.log(11);
            $("#tags_mian").css('display','flex');
        });
        // 打开cases层
        $("#case_id").click(function(){
            $("#cases_mian").css('display','flex');
        });
    </script>
    @if((isset($_GET['type']) && $_GET['type'] == 2))
        <script type="text/javascript" src="{{ asset('/plus/ueditor/ueditor.config.js') }}"></script>
        <!-- 编辑器源码文件 -->
        <script type="text/javascript" src="{{ asset('/plus/ueditor/ueditor.all.min.js') }}"></script>
        <script>
            $(function(){
                var ue = UE.getEditor('body',{initialFrameHeight: "500"});
            })
        </script>
    @elseif(isset($_GET['type']) && $_GET['type'] == 1)
        <link rel="stylesheet" href="/plus/editormd/css/editormd.min.css" />
        <script src="/plus/editormd/editormd.min.js"></script>
        <script>
            $(function(){
                var tag_token = $("[name='_token']").val();
                var editor = editormd("makerdown", {
                    width:"90%",
                    height:"500px",
                    // markdown: "xxxx",     // 动态设置标记文本
                    path : "/plus/editormd/lib/",  // 自动加载模块模式，codemirror，标记…家属库路径
                    codeFold: true,
                    searchReplace: true,
                    htmlDecode: "style,script,iframe|on*",
                    emoji: false,
                    taskList: true,
                    tocm: true,
                    tex: true,
                    flowChart: true,
                    sequenceDiagram: true,
                    imageUpload: true,
                    imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                    imageUploadURL: "/admin/tool/upload/editormd-image-file/article?_token="+tag_token,
                    onload: function () {
                        console.log('onload', this);
                    }
                });
            })
        </script>
    @elseif($olddata->type == 2)
        <script type="text/javascript" src="{{ asset('/plus/ueditor/ueditor.config.js') }}"></script>
        <!-- 编辑器源码文件 -->
        <script type="text/javascript" src="{{ asset('/plus/ueditor/ueditor.all.min.js') }}"></script>
        <script>
            $(function(){
                var ue = UE.getEditor('body',{initialFrameHeight: "500"});
            })
        </script>
    @else
        <link rel="stylesheet" href="/plus/editormd/css/editormd.min.css" />
        <script src="/plus/editormd/editormd.min.js"></script>
        <script>
            $(function(){
                var tag_token = $("[name='_token']").val();
                var editor = editormd("makerdown", {
                    width:"90%",
                    height:"500px",
                    // markdown: "xxxx",     // 动态设置标记文本
                    path : "/plus/editormd/lib/",  // 自动加载模块模式，codemirror，标记…家属库路径
                    codeFold: true,
                    searchReplace: true,
                    htmlDecode: "style,script,iframe|on*",
                    emoji: false,
                    taskList: true,
                    tocm: true,
                    tex: true,
                    flowChart: true,
                    sequenceDiagram: true,
                    imageUpload: true,
                    imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                    imageUploadURL: "/admin/tool/upload/editormd-image-file/article?_token="+tag_token,
                    onload: function () {
                        console.log('onload', this);
                    }
                });
            })
        </script>
    @endif
@endsection